<template>
  <div id="profile">
    <h1>这里是 我的 页面</h1>
    <h1>{{message | toFixed}}</h1>
    <h1>{{message1 | toFixed}}</h1>
    <button @click="isShow = !isShow">按钮</button>

    <transition name='fide1'>
      <div id="box" v-show="isShow"></div>
    </transition>

    <transition name="fide2">
      <div id="box1" v-show="isShow"></div>
    </transition>

    <transition name="fide3">
      <div id="box2" v-show="isShow"></div>
    </transition>

    <ul>
      <transition-group name="fade">
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
      </transition-group>    
    </ul>
    <button @click="addList">添加</button>
  </div>
</template>

<script>
import { mixin1 , mixin2 } from "../utils/mixins"
export default {
  name:"Profile",
  mixins:[mixin1,mixin2],
  data() {
    return {
      message1 : 10,
      isShow: true,
      list:["张三","李四"]
    }
  },
  methods:{
    addList(){
      this.list.push("王五")
    }
  },
  mounted() {
    this.add(10,22)
    this.isShow = !this.isShow
  },
}
</script>

<style scoped>
  #box{
    width: 100px;
    height: 100px;
    background: red;
  }
  .fide1-enter-active,.fide1-leave-active,.fide2-enter-active,.fide2-leave-active{
    transition: all 3s;
  }
  .fide1-enter,.fide1-leave-to{
    opacity: 0;
    transform: translateX(100px);
  }
  .fide2-enter,.fide2-leave-to{
    opacity: 0;
    transform: translateX(-100px);
  }
   #box1{
    width: 100px;
    height: 100px;
    background: green;
  }
  #box2{
    width: 100px;
    height: 100px;
    background: yellow;
  }
  @keyframes ani {
    0%{
      opacity: 0;
      background: yellow;
      transform: translateX(100px);
    }
    100%{
      opacity: 1;
      background: orange;
      transform: translateX(0px);
    }   
  }
  .fide3-enter-active{
    animation: ani 3s ;
  }
  .fide3-leave-active{
    animation: ani 3s reverse;
  }
  .fade-enter-active,.fade-leave-active{
    transition: all 5s;
  }
  .fade-enter,.fade-leave-to{
    opacity: 0;
    /* transform: translateX(100px); */
  }
</style>